<template>
	<div class="app-container">
		<el-form ref="formData" :model="formData" label-width="120px">
			<el-form-item label="章节：">
			  <el-select v-model="formData.textbook_id" placeholder="请选择章节" @change="chan">
			    <el-option v-for="(item,index) in teacherData" :key="index" :label="item.textbook_name" :value="item.unid"/>
			  </el-select>
			</el-form-item>
			<div class="knowkao" v-if="formData.textbook_id">
				<div v-for="(item,index) in formData.know_data">
					<el-form-item :label="item.type == 1?'知识点:':'考点:'">
					  <el-input v-model="item.point_name" placeholder="请输入知识点"></el-input>
					</el-form-item>
				</div>
			</div>
			<div class="btn" v-if="formData.textbook_id">
				<el-button type="primary" @click="addknowpoint">添加知识点/考点</el-button>
				<el-button @click="sub">提交</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
export default {
	components:{
		
	},
	data() {
		return{
			formData:{
				textbook_id:'',
				know_data:[]
			}
		}
	},
	created() {
		
	},
	methods:{
		chan(){
			console.log(this.formData);
		},
		//添加知识点
		addknowpoint(){
			console.log(this.teacherData);
			let resData = [
				{
					section_id:'', //章节id
					point_name:'', //知识点考点名字
					textbook_id:this.teacherData.unid, //教材id
					type:1, //1知识点2考点
				},
				{
					section_id:'', //章节id
					point_name:'', //知识点考点名字
					textbook_id:this.teacherData.unid, //教材id
					type:2, //1知识点2考点
				}
			]
			for (var i = 0; i < resData.length; i++) {
				this.formData.know_data.push(resData[i])
			}
			console.log(this.formData);
		},
		//提交
		sub(){
			console.log(this.formData);
		}
	},
	props:{
		teacherData:{
			type:Array,
			default:[]
		}
	}
}
</script>

<style>
	.btn{
		text-align: center;
	}
	.knowkao{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
</style>
